<template>
  <div class="index_body">
    <Home_header :settings="config.setting" :nav-left="true" :showtop="true"></Home_header>
    <div class="home_banner">
      <div id="pc_Banner" class="swiper_contnet swiper-container" v-swiper:mySwiper="swiperOption">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="banner in homeBanner.data">
            <a :href="banner.link" target="_blank">
              <div
                class="bannerinner"
                :style="{background:'url('+banner.image+')center 0px no-repeat'}"
              ></div>
            </a>
          </div>
        </div>
        <div class="swiper-pagination swiper-pagination-bullets"></div>
      </div>
      <!-- <div>{{phoneBanner}}</div> -->
      <div
        id="phone_Banner"
        class="swiper_contnet swiper-container"
        v-swiper:mySwipermin="swiperOptionmin"
      >
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="banner in phoneBanner.data">
            <a :href="banner.link" target="_blank">
              <div
                class="bannerinner"
                :style="{background:'url('+banner.image+')center 0px no-repeat'}"
              ></div>
            </a>
          </div>
        </div>
        <div class="swiper-pagination swiper-pagination-bullets"></div>
      </div>
    </div>
    <div class="secbox secw1">
      <div class="w-cbox fl">
        <div class="w-boxhd">
          <p class="boxhd-p">免费公开课</p>
          <nuxt-link
            :to="{path:'newslist',query:{anchor:'免费公开课',apipath:'freecourses',detailpath:'freecoursedetail'}}"
            class="more fr"
          >more &gt;&gt;</nuxt-link>
        </div>
        <ul class="w-dlist">
          <li v-for="(item,index) in freecourses.data">
            <nuxt-link
              :to="{path:'newsdetail',query:{id:item.id,anchor:'免费公开课',apipath:'freecourses',detailpath:'freecoursedetail'}}"
            >
              <div class="w-dlist-l">
                <p>{{item.date}}</p>
                <p>{{item.week}}</p>
              </div>
              <div class="w-dlist-r">
                <p>{{item.name}}</p>
                <span></span>
                <template v-if="item.state==1">
                  <em style="background: #a7a2a3">预约中</em>
                </template>
                <template v-else-if="item.state==2">
                  <em style="background: red">进行中</em>
                </template>
                <template v-else-if="item.state==3">
                  <em style="background: #a7a2a3">已结束</em>
                </template>
              </div>
            </nuxt-link>
          </li>
        </ul>
        <div class="w-yuyue">
          <div class="tit">在线预约 | 免费听课</div>
          <input v-model="freename" type="text" name="name" class="w-text" placeholder="输入您的真实姓名" />
          <input
            type="text"
            name="mobile"
            class="w-text"
            placeholder="输入您的手机号码"
            v-model="freephone"
          />
          <button @click="freebtn(freename,freephone)" class="w-btn">马上提交</button>
        </div>
      </div>

      <div class="w-zbox fl">
        <div class="zbon-tab">
          <ul class="tablist tablist-on" id="tabmenu">
            <li @click="hotmsg=true" :class="hotmsg?'curr':''">热点资讯</li>
            <li @click="hotmsg=false" :class="hotmsg?'':'curr'">华章热门课程</li>
          </ul>
          <div class="tabCon" id="tab2">
            <!-- 热点考讯 -->
            <div v-show="hotmsg" class="tabcen tabcen-on">
              <ul>
                <li v-for="(item,index) in hotnews.data">
                  <nuxt-link
                    :to="{path:'newsdetail',query:{cate_id:28,id:item.id,anchor:'热点资讯',apipath:'articles',detailpath:'articledetail'}}"
                  >
                    <p>
                      <template v-if="index<3">
                        <img src="../assets/img/xin_map.png" style="margin-right:5px;" />
                      </template>
                      {{item.title}}
                    </p>
                    <!-- style="color: #000;"-->
                    <span class="fr">{{item.created_at}}</span>
                  </nuxt-link>
                </li>
              </ul>
            </div>
            <div v-show="!hotmsg" class="tabcen tabcen-on tabcen-hh">
              <div style="cursor: pointer" v-for="item in hotclass.data" class="vnmj">
                <nuxt-link :to="{path:'classcenter/detail',query:{id:item.id}}">
                  <div class="fvix">
                    <img :src="item.image" alt />
                  </div>
                  <p class="pmn">{{item.name}}</p>
                  <p class="obn">{{item.description}}</p>
                  <p
                    style="margin-top:15px;display: flex;align-items: center;justify-content: space-between"
                  >
                    <span>{{item.work_time}}</span>
                    <b style="font-size:15px;color:#ff665a ">¥{{item.price}}起</b>
                  </p>
                </nuxt-link>
              </div>
            </div>
          </div>
        </div>
        <ul class="hotrec">
          <li class="li1">
            <nuxt-link
              :to="{path:'newslist',query:{cate_id:24,anchor:'课程安排',apipath:'articles',detailpath:'articledetail'}}"
            >
              <p>课程安排</p>
              <span>查看课表，安排日程</span>
            </nuxt-link>
          </li>
          <li class="li2">
            <nuxt-link to="/assessment">
              <p>报考测评</p>
              <span>测一测你是否适合读MBA</span>
            </nuxt-link>
          </li>
          <li class="li3">
            <nuxt-link to="/databases">
              <p>资料下载</p>
              <span>真题资料，报考指南</span>
            </nuxt-link>
          </li>
          <li class="li4">
            <a target="_blank" href="http://v.hzmba.com/default.htm">
              <p>网校试听</p>
              <span>免费试听华章名师课程</span>
            </a>
          </li>
        </ul>
      </div>

      <div class="w-cbox fr">
        <div class="w-boxhd">
          <p class="boxhd-p">考研日程</p>

          <nuxt-link
            :to="{path:'newslist',query:{anchor:'考研日程',apipath:'examschedule',detailpath:'examscheduledetail'}}"
            class="more fr"
          >more &gt;&gt;</nuxt-link>
        </div>
        <ul  class="w-dlist">
          <li v-for="(item,index) in examscheduleconten">
            <nuxt-link
              :to="{path:'newsdetail',query:{id:item.id,anchor:'考研日程',apipath:'examschedule',detailpath:'examscheduledetail'}}"
            >
              <div class="w-dlist-l">
                <p class="que_c">{{item.method}}</p>
              </div>
              <div class="w-dlist-r">
                <p>{{item.method}}</p>
                <span>{{item.start_at}}</span>
                <template v-if="item.state==1">
                  <em style="background: #a7a2a3">预约中</em>
                </template>
                <template v-else-if="item.state==2">
                  <em style="background: red">进行中</em>
                </template>
                <template v-else-if="item.state==3">
                  <em style="background: #a7a2a3">已结束</em>
                </template>
              </div>
            </nuxt-link>
          </li>
        </ul>

        <div class="w-yuyue">
          <div class="tit">考试日程 | 短信提醒</div>
          <input type="hidden" name="catid" value="1" />
          <input type="hidden" name="moduleid" value="10" />
          <input type="hidden" name="lang" value="1" />
          <input type="hidden" name="type" value="2" />

          <input type="text" name="name" class="w-text" placeholder="输入您的真实姓名" v-model="kaoyanname" />
          <input
            type="text"
            name="mobile"
            class="w-text"
            placeholder="输入您的手机号码"
            v-model="kaoyanphone"
          />
          <button @click="freebtn(kaoyanname,kaoyanphone)" class="w-btn">马上订阅</button>
        </div>
      </div>
      <div class="clear"></div>
    </div>
    <div v-if="mbadata" class="secbox secw2">
      <div class="w-top">
        <p class="tithd">
          <strong>MBA</strong> | 工商管理硕士
        </p>
        <nuxt-link
          :to="{path:'newslist',query:{cate_id:1,anchor:'工商管理硕士（MBA）',apipath:'articles',detailpath:'articledetail'}}"
          class="morehd"
        >更多 &gt;&gt;</nuxt-link>
      </div>
      <div class="zheng_lix">
        <div class="box1 fl">
          <nuxt-link :to="{path:'/classcenter/detail?id=8'}">
            <img src="../assets/img/embapic.jpg" />
          </nuxt-link>
        </div>
        <div class="box2 fl">
          <div class="centbd dashed">
            <div class="left fl">
              <a href="/newsdetail?cate_id=28&id=193&anchor=%E7%83%AD%E7%82%B9%E8%B5%84%E8%AE%AF&apipath=articles&detailpath=articledetail">
                <img src="../assets/img/sp1.jpg" />
              </a>
            </div>
            <div class="right fr">
              <h1>MBA提前面试</h1>
              <ul class="ullike">
                <li v-for="item1 in mbadata[0].data">
                  <nuxt-link
                    :to="{path:'newsdetail',query:{id:item1.id,cate_id:2,anchor:'MBA提前面试',apipath:'articles',detailpath:'articledetail'}}"
                  >{{item1.title}}</nuxt-link>
                </li>
              </ul>
            </div>
          </div>
          <div class="centbd">
            <div class="left fl">
              <a href="/newsdetail?cate_id=28&id=193&anchor=%E7%83%AD%E7%82%B9%E8%B5%84%E8%AE%AF&apipath=articles&detailpath=articledetail">
                <img src="../assets/img/sp2.jpg" />
              </a>
            </div>
            <div class="right fr">
              <h1>MBA复试录取</h1>
              <ul class="ullike">
                <li v-for="item2 in mbadata[1].data">
                  <nuxt-link
                    :to="{path:'newsdetail',query:{id:item2.id,cate_id:3,anchor:'MBA复试录取',apipath:'articles',detailpath:'articledetail'}}"
                  >{{item2.title}}</nuxt-link>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="box3 txtMarquee-top fl">
          <h1>MBA商学院专题</h1>
          <div class="bd upscroll">
            <div class="tempWrap" style="overflow:hidden; position:relative;">
              <ul>
                <li v-for="its in mbadata[2].data" class="clone" style="height: 54px;">
                  <nuxt-link
                    :to="{path:'newsdetail',query:{id:its.id,cate_id:7,anchor:'商学院专题',apipath:'articles',detailpath:'articledetail'}}"
                  >
                    <img :src="its.thumb" />
                  </nuxt-link>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="box4 fl">
          <h1>MBA招生简章</h1>
          <ul class="ul-pub">
            <li v-for="(itm,index) in mbadata[3].data">
              <span v-if="index<4" class="w-sel">{{index+1}}</span>
              <span v-else>{{index+1}}</span>
              <p>
                <nuxt-link
                  :to="{path:'newsdetail',query:{id:itm.id,cate_id:8,anchor:'MBA招生简章',apipath:'articles',detailpath:'articledetail'}}"
                >{{itm.title}}</nuxt-link>
              </p>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div v-if="banner1_url" class="secbox w-adve">
      <a target="_blank" :href="banner1_url.link">
        <img :src="banner1_url.image" />
      </a>
    </div>
    <div v-if="mbadata" class="secbox secw2">
      <div class="w-top">
        <p class="tithd">
          <strong>EMBA</strong> | 高级工商管理硕士
        </p>
        <nuxt-link
          :to="{path:'newslist',query:{cate_id:4,anchor:'高级工商管理硕士（EMBA）',apipath:'articles',detailpath:'articledetail'}}"
          class="morehd"
        >更多 &gt;&gt;</nuxt-link>
      </div>
      <div class="zheng_lix">
        <div class="box1 fl">
          <nuxt-link :to="{path:'/classcenter/detail?id=9'}">
            <img src="../assets/img/mbapic.jpg" />
          </nuxt-link>
        </div>
        <div class="box2 fl">
          <div class="centbd dashed">
            <div class="left fl">
              <a href="/newsdetail?cate_id=28&id=193&anchor=%E7%83%AD%E7%82%B9%E8%B5%84%E8%AE%AF&apipath=articles&detailpath=articledetail">
                <img src="../assets/img/sp3.jpg" />
              </a>
            </div>
            <div class="right fr">
              <h1>EMBA提前面试</h1>
              <ul class="ullike">
                <li v-for="itemem1 in mbadata[4].data">
                  <nuxt-link
                    :to="{path:'newsdetail',query:{id:itemem1.id,cate_id:5,anchor:'EMBA提前面试',apipath:'articles',detailpath:'articledetail'}}"
                  >{{itemem1.title}}</nuxt-link>
                </li>
              </ul>
            </div>
          </div>
          <div class="centbd">
            <div class="left fl">
              <a href="https://pan.baidu.com/s/1f177BBtYPnaII1PQVWkmig">
                <img src="../assets/img/sp4.jpg" />
              </a>
            </div>
            <div class="right fr">
              <h1>EMBA复试录取</h1>
              <ul class="ullike">
                <li v-for="itemem2 in mbadata[5].data">
                  <nuxt-link
                    :to="{path:'newsdetail',query:{id:itemem2.id,cate_id:6,anchor:'EMBA提前面试',apipath:'articles',detailpath:'articledetail'}}"
                  >{{itemem2.title}}</nuxt-link>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="box3 txtMarquee-top fl">
          <h1>EMBA商学院专题</h1>
          <ul class="bkqq">
            <li v-for="its in mbadata[6].data">
              <nuxt-link
                :to="{path:'newsdetail',query:{id:its.id,cate_id:29,anchor:'EMBA备考微信群',apipath:'articles',detailpath:'articledetail'}}"
              >
                <!-- <p>{{its.title}}</p> -->
                <img :src="its.thumb" alt />
              </nuxt-link>
            </li>
          </ul>
        </div>
        <div class="box4 fl">
          <h1>EMBA招生简章</h1>
          <ul class="ul-pub">
            <li v-for="(itm,index) in mbadata[7].data">
              <span v-if="index<4" class="w-sel">{{index+1}}</span>
              <span v-else>{{index+1}}</span>
              <p>
                <nuxt-link
                  :to="{path:'newsdetail',query:{id:itm.id,cate_id:9,anchor:'EMBA招生简章',apipath:'articles',detailpath:'articledetail'}}"
                >{{itm.title}}</nuxt-link>
              </p>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div v-if="banner2_url" class="box_simn">
      <img :src="banner2_url.image" alt />
    </div>
    <div v-if="mbadatanews" class="secbox secw3 index_newslist">
      <div class="boxbd">
        <div class="w-top">
          <p class="tithd">
            <strong>MPAcc</strong> | 会计硕士
          </p>
          <nuxt-link
            :to="{path:'newslist',query:{cate_id:10,anchor:'会计硕士（MPAcc）',apipath:'articles',detailpath:'articledetail'}}"
            class="morehd"
          >更多 &gt;&gt;</nuxt-link>
        </div>
        <div class="w-bot">
          <ul class="tabul tablist-on">
            <li @click="flag1=true" :class="flag1?'curr':''">MPAcc招生信息</li>
            <li @click="flag1=false" :class="!flag1?'curr':''">MPAcc复试录取</li>
          </ul>
          <div class="tabCon">
            <div class="tabcen tabcen-on" v-show="flag1">
              <ul class="ul-pub">
                <li v-for="(itm,index) in mbadatanews[0].data">
                  <span v-if="index<4" class="w-sel">{{index+1}}</span>
                  <span v-else>{{index+1}}</span>
                  <p>
                    <nuxt-link
                      :to="{path:'newsdetail',query:{id:itm.id,cate_id:11,anchor:'MPAcc招生信息',apipath:'articles',detailpath:'articledetail'}}"
                    >{{itm.title}}</nuxt-link>
                  </p>
                </li>
              </ul>
              <nuxt-link
                class="mymoreclss"
                :to="{path:'newslist',query:{cate_id:11,anchor:'MPAcc招生信息',apipath:'articles',detailpath:'articledetail'}}"
              >更多>></nuxt-link>
            </div>
            <div class="tabcen tabcen-on" v-show="!flag1">
              <ul class="ul-pub">
                <li v-for="(itm,index) in mbadatanews[1].data">
                  <span v-if="index<4" class="w-sel">{{index+1}}</span>
                  <span v-else>{{index+1}}</span>
                  <p>
                    <nuxt-link
                      :to="{path:'newsdetail',query:{id:itm.id,cate_id:12,anchor:'MPAcc复试录取',apipath:'articles',detailpath:'articledetail'}}"
                    >{{itm.title}}</nuxt-link>
                  </p>
                </li>
              </ul>
              <nuxt-link
                class="mymoreclss"
                :to="{path:'newslist',query:{cate_id:12,anchor:'MPAcc复试录取',apipath:'articles',detailpath:'articledetail'}}"
              >更多>></nuxt-link>
            </div>
          </div>
        </div>
      </div>
      <div class="boxbd">
        <div class="w-top">
          <p class="tithd">
            <strong>MPA</strong> | 公共管理硕士
          </p>
          <nuxt-link
            :to="{path:'newslist',query:{cate_id:13,anchor:'公共管理硕士（MPA）',apipath:'articles',detailpath:'articledetail'}}"
            class="morehd"
          >更多 &gt;&gt;</nuxt-link>
        </div>
        <div class="w-bot">
          <ul class="tabul tablist-on">
            <li @click="flag2=true" :class="flag2?'curr':''">MPA招生信息</li>
            <li @click="flag2=false" :class="!flag2?'curr':''">MPA复试录取</li>
          </ul>
          <div class="tabCon">
            <div class="tabcen tabcen-on" v-show="flag2">
              <ul class="ul-pub">
                <li v-for="(itm,index) in mbadatanews[2].data">
                  <span v-if="index<4" class="w-sel">{{index+1}}</span>
                  <span v-else>{{index+1}}</span>
                  <p>
                    <nuxt-link
                      :to="{path:'newsdetail',query:{id:itm.id,cate_id:14,anchor:'MPA招生信息',apipath:'articles',detailpath:'articledetail'}}"
                    >{{itm.title}}</nuxt-link>
                  </p>
                </li>
              </ul>
              <nuxt-link
                class="mymoreclss"
                :to="{path:'newslist',query:{cate_id:14,anchor:'MPA招生信息',apipath:'articles',detailpath:'articledetail'}}"
              >更多>></nuxt-link>
            </div>
            <div class="tabcen tabcen-on" v-show="!flag2">
              <ul class="ul-pub">
                <li v-for="(itm,index) in mbadatanews[3].data">
                  <span v-if="index<4" class="w-sel">{{index+1}}</span>
                  <span v-else>{{index+1}}</span>
                  <p>
                    <nuxt-link
                      :to="{path:'newsdetail',query:{id:itm.id,cate_id:15,anchor:'MPA复试录取',apipath:'articles',detailpath:'articledetail'}}"
                    >{{itm.title}}</nuxt-link>
                  </p>
                </li>
              </ul>
              <nuxt-link
                class="mymoreclss"
                :to="{path:'newslist',query:{cate_id:15,anchor:'MPA复试录取',apipath:'articles',detailpath:'articledetail'}}"
              >更多>></nuxt-link>
            </div>
          </div>
        </div>
      </div>
      <div class="boxbd">
        <div class="w-top">
          <p class="tithd">
            <strong>MEM</strong> | 工程管理硕士
          </p>
          <nuxt-link
            :to="{path:'newslist',query:{cate_id:16,anchor:'工程管理硕士（MEM）',apipath:'articles',detailpath:'articledetail'}}"
            class="morehd"
          >更多 &gt;&gt;</nuxt-link>
        </div>
        <div class="w-bot">
          <ul class="tabul tablist-on">
            <li @click="flag3=true" :class="flag3?'curr':''">MEM招生信息</li>
            <li @click="flag3=false" :class="!flag3?'curr':''">MEM复试录取</li>
          </ul>
          <div class="tabCon">
            <div class="tabcen tabcen-on" v-show="flag3">
              <ul class="ul-pub">
                <li v-for="(itm,index) in mbadatanews[4].data">
                  <span v-if="index<4" class="w-sel">{{index+1}}</span>
                  <span v-else>{{index+1}}</span>
                  <p>
                    <nuxt-link
                      :to="{path:'newsdetail',query:{id:itm.id,cate_id:17,anchor:'MEM招生信息',apipath:'articles',detailpath:'articledetail'}}"
                    >{{itm.title}}</nuxt-link>
                  </p>
                </li>
              </ul>
              <nuxt-link
                class="mymoreclss"
                :to="{path:'newslist',query:{cate_id:17,anchor:'MEM招生信息',apipath:'articles',detailpath:'articledetail'}}"
              >更多>></nuxt-link>
            </div>
            <div class="tabcen tabcen-on" v-show="!flag3">
              <ul class="ul-pub">
                <li v-for="(itm,index) in mbadatanews[5].data">
                  <span v-if="index<4" class="w-sel">{{index+1}}</span>
                  <span v-else>{{index+1}}</span>
                  <p>
                    <nuxt-link
                      :to="{path:'newsdetail',query:{id:itm.id,cate_id:18,anchor:'MEM复试录取',apipath:'articles',detailpath:'articledetail'}}"
                    >{{itm.title}}</nuxt-link>
                  </p>
                </li>
              </ul>
              <nuxt-link
                class="mymoreclss"
                :to="{path:'newslist',query:{cate_id:18,anchor:'MEM复试录取',apipath:'articles',detailpath:'articledetail'}}"
              >更多>></nuxt-link>
            </div>
          </div>
        </div>
      </div>
      <div class="boxbd">
        <div class="w-top">
          <p class="tithd">
            <strong>MTA</strong> | 旅游管理硕士
          </p>
          <nuxt-link
            :to="{path:'newslist',query:{cate_id:19,anchor:'旅游管理硕士（MTA）',apipath:'articles',detailpath:'articledetail'}}"
            class="morehd"
          >更多 &gt;&gt;</nuxt-link>
        </div>
        <div class="w-bot">
          <ul class="tabul tablist-on">
            <li @click="flag4=true" :class="flag4?'curr':''">MTA招生信息</li>
            <li @click="flag4=false" :class="!flag4?'curr':''">MTA复试录取</li>
          </ul>
          <div class="tabCon">
            <div class="tabcen tabcen-on" v-show="flag4">
              <ul class="ul-pub">
                <li v-for="(itm,index) in mbadatanews[6].data">
                  <span v-if="index<4" class="w-sel">{{index+1}}</span>
                  <span v-else>{{index+1}}</span>
                  <p>
                    <nuxt-link
                      :to="{path:'newsdetail',query:{id:itm.id,cate_id:20,anchor:'MTA招生信息',apipath:'articles',detailpath:'articledetail'}}"
                    >{{itm.title}}</nuxt-link>
                  </p>
                </li>
              </ul>
              <nuxt-link
                class="mymoreclss"
                :to="{path:'newslist',query:{cate_id:20,anchor:'MTA招生信息',apipath:'articles',detailpath:'articledetail'}}"
              >更多>></nuxt-link>
            </div>
            <div class="tabcen tabcen-on" v-show="!flag4">
              <ul class="ul-pub">
                <li v-for="(itm,index) in mbadatanews[7].data">
                  <span v-if="index<4" class="w-sel">{{index+1}}</span>
                  <span v-else>{{index+1}}</span>
                  <p>
                    <nuxt-link
                      :to="{path:'newsdetail',query:{id:itm.id,cate_id:21,anchor:'MTA复试录取',apipath:'articles',detailpath:'articledetail'}}"
                    >{{itm.title}}</nuxt-link>
                  </p>
                </li>
              </ul>
              <nuxt-link
                class="mymoreclss"
                :to="{path:'newslist',query:{cate_id:21,anchor:'MTA复试录取',apipath:'articles',detailpath:'articledetail'}}"
              >更多>></nuxt-link>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="banner3_url" class="secbox w-adve">
      <a target="_blank" :href="banner3_url.link">
        <img :src="banner3_url.image" />
      </a>
    </div>
    <div class="secbox secw4">
      <div class="lbox fl">
        <div class="last">
          <div class="tit">
            <p>华章20年, 十几万考生的选择</p>
          </div>
          <div class="shu_lun">
            <div class="swiper-container shunl_v" v-swiper:mySwipergrst="swipertwo">
              <div class="swiper-wrapper">
                <div v-for="(item,index) in 10" class="swiper-slide nes_list">
                  <div class="nes_mk">
                    <img src="../assets/img/box_05.jpg" alt />
                    <p v-if="index==0">史*峰&nbsp;&nbsp;哈尔滨工程大学</p>
                    <p v-if="index==1">张*&nbsp;&nbsp;中国石油大学</p>
                    <p v-if="index==2">鞠*文&nbsp;&nbsp;中国海洋大学</p>
                    <p v-if="index==3">于*超&nbsp;&nbsp;中国石油大学</p>
                    <p v-if="index==4">王*权&nbsp;&nbsp;上海交通大学</p>
                    <p v-if="index==5">苏*&nbsp;&nbsp;北京航空航天大学</p>
                    <p v-if="index==6">张*&nbsp;&nbsp;中国石油大学</p>
                    <p v-if="index==7">田*&nbsp;&nbsp;中国海洋大学</p>
                    <p v-if="index==8">赵*飞&nbsp;&nbsp;西安交通大学</p>
                    <p v-if="index==9">于*非&nbsp;&nbsp;中国石油大学</p>
                    <p v-if="index==10">王*豫&nbsp;&nbsp;哈尔滨工程大学</p>
                    <p v-if="index==11">马*&nbsp;&nbsp;中国石油大学</p>
                    <p v-if="index==12">宋*卫&nbsp;&nbsp;中国石油大学</p>
                    <p v-if="index==13">杨*&nbsp;&nbsp;中国石油大学</p>
                    <p v-if="index==14">王*仲&nbsp;&nbsp;中国石油大学</p>
                    <p v-if="index==15">李*娟&nbsp;&nbsp;西安交通大学</p>
                    <p v-if="index==16">王*&nbsp;&nbsp;哈尔滨工程大学</p>
                    <p v-if="index==17">于*滨&nbsp;&nbsp;中国石油大学</p>
                    <p v-if="index==18">李*林&nbsp;&nbsp;中国政法大学</p>
                    <p v-if="index==19">宋*胜&nbsp;&nbsp;中国海洋大学</p>
                    <p v-if="index==20">刘*玮&nbsp;&nbsp;南开大学</p>
                    <p v-if="index==21">郭*宏&nbsp;&nbsp;中国海洋大学</p>
                    <p v-if="index==22">于**慧&nbsp;&nbsp;中国海洋大学</p>
                    <p v-if="index==23">李*敏&nbsp;&nbsp;中国石油大学</p>
                    <p v-if="index==24">丁*凤&nbsp;&nbsp;中国石油大学</p>
                    <p v-if="index==25">刘*成&nbsp;&nbsp;中国石油大学</p>
                    <p v-if="index==26">许*奇&nbsp;&nbsp;中国石油大学</p>
                    <p v-if="index==27">裴*&nbsp;&nbsp;中国海洋大学</p>
                    <p v-if="index==28">刘*超&nbsp;&nbsp;中国海洋大学</p>
                    <p v-if="index==29">纪*晓&nbsp;&nbsp;中国海洋大学</p>
                    <p v-if="index==30">刘*沛&nbsp;&nbsp;中国海洋大学</p>
                    <p v-if="index==31">李*燃&nbsp;&nbsp;中国海洋大学</p>
                    <p v-if="index==32">田*&nbsp;&nbsp;中国海洋大学</p>
                    <p v-if="index==33">吕*斌&nbsp;&nbsp;中国石油大学</p>
                    <p v-if="index==34">闫*辉&nbsp;&nbsp;中国石油大学</p>
                    <p v-if="index==35">任*致&nbsp;&nbsp;中国石油大学</p>
                    <p v-if="index==36">张*升&nbsp;&nbsp;中国海洋大学</p>
                    <p v-if="index==37">尹*辉&nbsp;&nbsp;中国海洋大学</p>
                    <p v-if="index==38">高*&nbsp;&nbsp;中国海洋大学</p>
                    <p v-if="index==39">贾*娟&nbsp;&nbsp;哈尔滨工程大学</p>
                    <p v-if="index==40">邓*宁&nbsp;&nbsp;哈尔滨工程大学</p>
                    <p v-if="index==41">高*&nbsp;&nbsp;哈尔滨工程大学</p>
                    <p v-if="index==42">仲*婷&nbsp;&nbsp;中国石油大学</p>
                    <p v-if="index==43">李*&nbsp;&nbsp;中国石油大学</p>
                    <p v-if="index==44">刘*&nbsp;&nbsp;中国海洋大学</p>
                    <p v-if="index==45">孙*飞&nbsp;&nbsp;中国海洋大学</p>
                    <p v-if="index==46">战*&nbsp;&nbsp;中国海洋大学</p>
                    <p v-if="index==47">霍*怡&nbsp;&nbsp;中国海洋大学</p>
                    <p v-if="index==48">刘*&nbsp;&nbsp;南开大学</p>
                    <p v-if="index==49">唐*鑫&nbsp;&nbsp;南开大学</p>
                    <p v-if="index==50">王*&nbsp;&nbsp;南开大学</p>
                    <p v-if="index==51">张*龙&nbsp;&nbsp;哈尔滨工程大学</p>
                    <p v-if="index==52">张*建&nbsp;&nbsp;哈尔滨工程大学</p>
                    <p v-if="index==53">刘*&nbsp;&nbsp;哈尔滨工程大学</p>
                    <p v-if="index==54">王*花&nbsp;&nbsp;中国海洋大学</p>
                    <p v-if="index==55">张*&nbsp;&nbsp;中国海洋大学</p>
                    <p v-if="index==56">姜*岩&nbsp;&nbsp;中国海洋大学</p>
                    <p v-if="index==57">苏*&nbsp;&nbsp;中国海洋大学</p>
                    <p v-if="index==58">赵*国&nbsp;&nbsp;中国海洋大学</p>
                    <p v-if="index==59">贾*凯&nbsp;&nbsp;中国海洋大学</p>
                    <p v-if="index==60">洪*&nbsp;&nbsp;中国海洋大学</p>
                    <p v-if="index==61">李*林&nbsp;&nbsp;中国海洋大学</p>
                    <p v-if="index==62">王*英&nbsp;&nbsp;中国海洋大学</p>
                    <p v-if="index==63">尹*雷&nbsp;&nbsp;中国海洋大学</p>
                    <p v-if="index==64">李*玉&nbsp;&nbsp;中国海洋大学</p>
                    <p v-if="index==65">李*珠&nbsp;&nbsp;中国海洋大学</p>
                    <p v-if="index==66">梁*潇&nbsp;&nbsp;中国海洋大学</p>
                    <p v-if="index==67">崔*男&nbsp;&nbsp;中国海洋大学</p>
                    <p v-if="index==68">赵*阳&nbsp;&nbsp;中国海洋大学</p>
                    <p v-if="index==69">王*涛&nbsp;&nbsp;中国海洋大学</p>
                    <p v-if="index==70">张*&nbsp;&nbsp;哈尔滨工程大学</p>
                    <p v-if="index==71">王*蒙&nbsp;&nbsp;哈尔滨工程大学</p>
                    <p v-if="index==72">宋*洁&nbsp;&nbsp;哈尔滨工程大学</p>
                    <p v-if="index==73">李*光&nbsp;&nbsp;哈尔滨工程大学</p>
                    <p v-if="index==74">毕*谕&nbsp;&nbsp;哈尔滨工程大学</p>
                    <p v-if="index==75">刘*新&nbsp;&nbsp;哈尔滨工程大学</p>
                    <p v-if="index==76">宋*翔&nbsp;&nbsp;哈尔滨工程大学</p>
                    <p v-if="index==77">王*敏&nbsp;&nbsp;哈尔滨工程大学</p>
                    <p v-if="index==78">刘*&nbsp;&nbsp;中国海洋大学</p>
                    <p v-if="index==79">姜*亭&nbsp;&nbsp;中国海洋大学</p>
                    <p v-if="index==80">刘*新&nbsp;&nbsp;中国海洋大学</p>
                    <p v-if="index==81">王*文&nbsp;&nbsp;中国海洋大学</p>
                    <p v-if="index==82">张*璇&nbsp;&nbsp;中国海洋大学</p>
                    <p v-if="index==83">孙*弟&nbsp;&nbsp;中国海洋大学</p>
                    <p v-if="index==84">白*&nbsp;&nbsp;中国石油大学</p>
                    <p v-if="index==85">刘*&nbsp;&nbsp;中国石油大学</p>
                    <p v-if="index==86">张*华&nbsp;&nbsp;中国石油大学</p>
                    <p v-if="index==87">李*婷&nbsp;&nbsp;中国石油大学</p>
                    <p v-if="index==88">宋*&nbsp;&nbsp;中国石油大学</p>
                    <p v-if="index==89">张*&nbsp;&nbsp;中国石油大学</p>
                    <p v-if="index==90">谭*妹&nbsp;&nbsp;中国石油大学</p>
                    <p v-if="index==91">胡*峰&nbsp;&nbsp;中国石油大学</p>
                    <p v-if="index==92">贺*&nbsp;&nbsp;中国石油大学</p>
                  </div>
                  <div class="fen_ssk">
                    <p v-if="index==0">笔试总分227</p>
                    <p v-if="index==1">笔试总分222</p>
                    <p v-if="index==2">笔试总分219</p>
                    <p v-if="index==3">笔试总分209</p>
                    <p v-if="index==4">笔试总分206</p>
                    <p v-if="index==5">笔试总分204</p>
                    <p v-if="index==6">笔试总分202</p>
                    <p v-if="index==7">笔试总分201</p>
                    <p v-if="index==8">笔试总分201</p>
                    <p v-if="index==9">笔试总分199</p>
                    <p v-if="index==10">笔试总分199</p>
                    <p v-if="index==11">笔试总分198</p>
                    <p v-if="index==12">笔试总分198</p>
                    <p v-if="index==13">笔试总分198</p>
                    <p v-if="index==14">笔试总分197</p>
                    <p v-if="index==15">笔试总分196</p>
                    <p v-if="index==16">笔试总分196</p>
                    <p v-if="index==17">笔试总分196</p>
                    <p v-if="index==18">笔试总分194</p>
                    <p v-if="index==19">笔试总分192</p>
                    <p v-if="index==20">笔试总分191</p>
                    <p v-if="index==21">笔试总分191</p>
                    <p v-if="index==22">笔试总分191</p>
                    <p v-if="index==23">笔试总分191</p>
                    <p v-if="index==24">笔试总分191</p>
                    <p v-if="index==25">笔试总分190</p>
                    <p v-if="index==26">笔试总分190</p>
                    <p v-if="index==27">笔试总分189</p>
                    <p v-if="index==28">笔试总分189</p>
                    <p v-if="index==29">笔试总分189</p>
                    <p v-if="index==30">笔试总分187</p>
                    <p v-if="index==31">笔试总分187</p>
                    <p v-if="index==32">笔试总分187</p>
                    <p v-if="index==33">笔试总分187</p>
                    <p v-if="index==34">笔试总分187</p>
                    <p v-if="index==35">笔试总分187</p>
                    <p v-if="index==36">笔试总分184</p>
                    <p v-if="index==37">笔试总分184</p>
                    <p v-if="index==38">笔试总分183</p>
                    <p v-if="index==39">笔试总分183</p>
                    <p v-if="index==40">笔试总分183</p>
                    <p v-if="index==41">笔试总分183</p>
                    <p v-if="index==42">笔试总分183</p>
                    <p v-if="index==43">笔试总分183</p>
                    <p v-if="index==44">笔试总分182</p>
                    <p v-if="index==45">笔试总分182</p>
                    <p v-if="index==46">笔试总分182</p>
                    <p v-if="index==47">笔试总分182</p>
                    <p v-if="index==48">笔试总分182</p>
                    <p v-if="index==49">笔试总分182</p>
                    <p v-if="index==50">笔试总分182</p>
                    <p v-if="index==51">笔试总分181</p>
                    <p v-if="index==52">笔试总分181</p>
                    <p v-if="index==53">笔试总分181</p>
                    <p v-if="index==54">笔试总分181</p>
                    <p v-if="index==55">笔试总分181</p>
                    <p v-if="index==56">笔试总分180</p>
                    <p v-if="index==57">笔试总分180</p>
                    <p v-if="index==58">笔试总分180</p>
                    <p v-if="index==59">笔试总分179</p>
                    <p v-if="index==60">笔试总分179</p>
                    <p v-if="index==61">笔试总分179</p>
                    <p v-if="index==62">笔试总分179</p>
                    <p v-if="index==63">笔试总分178</p>
                    <p v-if="index==64">笔试总分178</p>
                    <p v-if="index==65">笔试总分178</p>
                    <p v-if="index==66">笔试总分177</p>
                    <p v-if="index==67">笔试总分177</p>
                    <p v-if="index==68">笔试总分177</p>
                    <p v-if="index==69">笔试总分177</p>
                    <p v-if="index==70">笔试总分177</p>
                    <p v-if="index==71">笔试总分176</p>
                    <p v-if="index==72">笔试总分175</p>
                    <p v-if="index==73">笔试总分175</p>
                    <p v-if="index==74">笔试总分175</p>
                    <p v-if="index==75">笔试总分175</p>
                    <p v-if="index==76">笔试总分175</p>
                    <p v-if="index==77">笔试总分175</p>
                    <p v-if="index==78">笔试总分174</p>
                    <p v-if="index==79">笔试总分174</p>
                    <p v-if="index==80">笔试总分174</p>
                    <p v-if="index==81">笔试总分172</p>
                    <p v-if="index==82">笔试总分172</p>
                    <p v-if="index==83">笔试总分172</p>
                    <p v-if="index==84">笔试总分172</p>
                    <p v-if="index==85">笔试总分172</p>
                    <p v-if="index==86">笔试总分172</p>
                    <p v-if="index==87">笔试总分171</p>
                    <p v-if="index==88">笔试总分171</p>
                    <p v-if="index==89">笔试总分171</p>
                    <p v-if="index==90">笔试总分170</p>
                    <p v-if="index==91">笔试总分170</p>
                    <p v-if="index==92">笔试总分170</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="rbox fr">
        <div class="album">
          <div class="al-box1 fl">
            <nuxt-link
              v-for="(item,index) in articon.data"
              :to="{path:'/newsdetail',query:{id:item.id,cate_id:25,anchor:'精彩华章',apipath:'articles',detailpath:'articledetail'}}"
            >
              <img v-if="index==0" :src="item.thumb" />
              <!--              <div v-if="index==0" style="color:#000" class="alb-bg">{{item.title}}</div>-->
              <div v-if="index==0" class="abl-con">{{item.title}}</div>
            </nuxt-link>
          </div>
          <div class="al-box2 fl">
            <div class="last1">
              <div class="icon1" style="margin-right:8px;">
                <nuxt-link
                  v-for="(item,index) in articon.data"
                  :to="{path:'/newsdetail',query:{id:item.id,cate_id:25,anchor:'精彩华章',apipath:'articles',detailpath:'articledetail'}}"
                >
                  <img v-if="index==1" :src="item.thumb" />
                  <!--                  <div v-if="index==1" style="color:#000" class="alb-bg">{{item.title}}</div>-->
                  <div v-if="index==1" class="abl-con">{{item.title}}</div>
                </nuxt-link>
              </div>
              <div class="icon1">
                <nuxt-link
                  v-for="(item,index) in articon.data"
                  :to="{path:'/newsdetail',query:{id:item.id,cate_id:25,anchor:'精彩华章',apipath:'articles',detailpath:'articledetail'}}"
                >
                  <img v-if="index==2" :src="item.thumb" />
                  <!--                  <div v-if="index==2" style="color:#000" class="alb-bg">{{item.title}}</div>-->
                  <div v-if="index==2" class="abl-con">{{item.title}}</div>
                </nuxt-link>
              </div>
            </div>
            <div class="text fl">精彩华章</div>
            <div class="last2 fl">
              <nuxt-link
                v-for="(item,index) in articon.data"
                :to="{path:'/newsdetail',query:{id:item.id,cate_id:25,anchor:'精彩华章',apipath:'articles',detailpath:'articledetail'}}"
              >
                <img v-if="index==3" :src="item.thumb" />
                <!--                <div v-if="index==3" style="color:#000" class="alb-bg">{{item.title}}</div>-->
                <div v-if="index==3" class="abl-con">{{item.title}}</div>
              </nuxt-link>
            </div>
          </div>
          <div class="al-box3 fl">
            <div class="last3 fl">
              <nuxt-link
                v-for="(item,index) in articon.data"
                :to="{path:'/newsdetail',query:{id:item.id,cate_id:25,anchor:'精彩华章',apipath:'articles',detailpath:'articledetail'}}"
              >
                <img v-if="index==4" :src="item.thumb" />
                <!--                <div v-if="index==4" style="color:#000" class="alb-bg">{{item.title}}</div>-->
                <div v-if="index==4" class="abl-con">{{item.title}}</div>
              </nuxt-link>
            </div>
            <div class="last4 fl">
              <nuxt-link
                v-for="(item,index) in articon.data"
                :to="{path:'/newsdetail',query:{id:item.id,cate_id:25,anchor:'精彩华章',apipath:'articles',detailpath:'articledetail'}}"
              >
                <img v-if="index==5" :src="item.thumb" />
                <!--                <div v-if="index==5" style="color:#000" class="alb-bg">{{item.title}}</div>-->
                <div v-if="index==5" class="abl-con">{{item.title}}</div>
              </nuxt-link>
            </div>
          </div>
          <div class="al-box4 fl">
            <div class="last5 fl">
              <nuxt-link
                v-for="(item,index) in articon.data"
                :to="{path:'/newsdetail',query:{id:item.id,cate_id:25,anchor:'精彩华章',apipath:'articles',detailpath:'articledetail'}}"
              >
                <img v-if="index==6" :src="item.thumb" />
                <!--                <div v-if="index==6" style="color:#000" class="alb-bg">{{item.title}}</div>-->
                <div v-if="index==6" class="abl-con">{{item.title}}</div>
              </nuxt-link>
            </div>
            <div class="last5 fl">
              <nuxt-link
                v-for="(item,index) in articon.data"
                :to="{path:'/newsdetail',query:{id:item.id,cate_id:25,anchor:'精彩华章',apipath:'articles',detailpath:'articledetail'}}"
              >
                <img v-if="index==7" :src="item.thumb" />
                <!--                <div v-if="index==7" style="color:#000" class="alb-bg">{{item.title}}</div>-->
                <div v-if="index==7" class="abl-con">{{item.title}}</div>
              </nuxt-link>
            </div>
            <nuxt-link
              :to="{path:'/newslist',query:{cate_id:25,anchor:'精彩华章',apipath:'articles',detailpath:'articledetail'}}"
              class="more"
            >
              更多
              <br />相册
            </nuxt-link>
          </div>
        </div>
      </div>
    </div>
    <div class="secbox secw5">
      <div class="w-top liauyx_c">
        <p class="tithd">
          <strong>备考心得</strong> | 华章学霸分享
        </p>
        <nuxt-link
          :to="{path:'newslist',query:{anchor:'备考心得',apipath:'students',detailpath:'studentdetail'}}"
        >更多 &gt;&gt;</nuxt-link>
      </div>
      <div class="zeng_ii">
        <div v-for="(item,index) in tips.data" class="box fl">
          <div class="centbd">
            <h1>
              <strong>{{item.name}}</strong>
            </h1>
            <div class="head headss">
              <img :src="item.image" />
            </div>
            <i></i>
            <p class="description_d">{{item.description}}</p>
            <div class="last">
              <span>
                <img src="../assets/img/heart-logo.jpg" />
              </span>
              <nuxt-link
                :to="{path:'newsdetail',query:{id:item.id,anchor:'备考心得',detailpath:'studentdetail',apipath:'students'}}"
              >查看备考心得</nuxt-link>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="secbox secw6">
      <div class="w-top">
        <p class="tithd">
          <strong>华章师资团队</strong> | 全国名师，MBA辅导10年以上经验
        </p>
        <nuxt-link
          :to="{path:'newslist',query:{anchor:'华章师资团队',apipath:'experts',detailpath:'expertdetail'}}"
          class="morehd"
        >更多 &gt;&gt;</nuxt-link>
      </div>
      <div class="slideBox">
        <!--             <a class="sPrev" href="javascript:void(0)"></a> -->
        <div class="tempWrap" style="overflow:hidden; position:relative; width:1176px">
          <ul class="tuan_ul">
            <li
              v-for="(item,index) in experts.data"
              class="clone"
              style="float: left; width: 156px;"
            >
              <div class="pic picnm">
                <img :src="item.image" />
              </div>
              <div class="title">{{item.title}} {{item.name}}</div>
            </li>
          </ul>
        </div>
        <!--             <a class="sNext" href="javascript:void(0)"></a> -->
      </div>
    </div>
    <div class="secbox secw7 turoring">
      <div class="w-top">
        <p class="tithd">
          <strong>华章动态</strong> | 历经20年，您的MBA备考管家！
        </p>
        <nuxt-link
          :to="{path:'newslist',query:{cate_id:28,anchor:'热点资讯',apipath:'articles',detailpath:'articledetail'}}"
          class="morehd"
        >更多 &gt;&gt;</nuxt-link>
      </div>
      <div class="scrollx">
        <div
          @mouseenter="donwplay"
          @mouseleave="leavemouse"
          class="huazhang_slide swiper-container"
          v-swiper:myswiper2="mySwiper2"
        >
          <div class="swiper-wrapper swiper-no-swiping">
            <div class="swiper-slide siperdong" v-for="(item,index) in albums.data">
              <img :src="item.image" alt />
              <p class="zhe_p">{{item.name}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Home_header from "../components/Home-header.vue";

export default {
  name: "home",
  components: {
    Home_header
  },
  async asyncData({ app }) {
    //文章分类
    let articlecategories = await app.$apiGet("articlecategories");
    //文章详情
    let articon = await app.$apiGet("articles", { cate_id: 25, is_index: 2 });
    //网站设置
    let config = await app.$apiconfig();
    //banner列表
    let bannerList = await app.$apiGet("bannercategories");
    let homeBanner = await app.$apiGet("banners", { cate_id: 1 });
    //手机端banner
    let phoneBanner = await app.$apiGet("banners", { cate_id: 20 });
    //免费公开课
    let freecourses = await app.$apiGet("freecourses", {
      page: 1, // 分页 ，不传默认1
      limit: 3 // 数量，不传默认10
    });
    //考研日程
    let examschedule = await app.$apiGet("examschedule", {
      page: 1, // 分页 ，不传默认1
      limit: 3 // 数量，不传默认10
    });
    let examscheduleconten = examschedule.data;

    //热点咨询
    let hotnews = await app.$apiGet("articles", {
      cate_id: 28,
      page: 1,
      limit: 8,
      is_index: 1
    });
    let hotclass = await app.$apiGet("hotcourses", {
      page: 1,
      limit: 3
    });
    //华章动态
    let dynamic = await app.$apiGet("albumcategories");

    //学霸分享
    let tips = await app.$apiGet("students");
    //师资团队
    let experts = await app.$apiGet("experts", { location: 1 });
    //华章动态
    let albums = await app.$apiGet("albums", { cate_id: 1 });
    return {
      phoneBanner: phoneBanner,
      albums,
      link: "",
      articon,
      articlecategories,
      experts: experts,
      tips: tips,
      hotclass,
      dynamic,
      config,
      hotnews,
      bannerList,
      homeBanner,
      freecourses,
      examschedule: examschedule,
      examscheduleconten: examscheduleconten,
      swipertwo: {
        direction: "vertical",
        slidesPerView: 4,
        spaceBetween: 0,
        slidesPerGroup: 1,
        loop: true,
        speed: 1000, //匀速时间
        autoplay: {
          delay: 0,
          stopOnLastSlide: true,
          disableOnInteraction: false
        },
        loopFillGroupWithBlank: true
      },
      mySwiper2: {
        speed: 5000, //匀速时间
        autoplay: {
          delay: 1,
          stopOnLastSlide: true,
          disableOnInteraction: false
        },
        loop: true, //自动轮播
        // freeMode: true,
        slidesPerView: 4,
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        autoplayDisableOnInteraction: true,
        noSwiping: true,
        preventLinksPropagation: false // 阻止点击事件冒泡
      }
    };
  },
  data() {
    return {
      mySwiper2: "",
      albums: [],
      flag1: true,
      flag2: true,
      flag3: true,
      flag4: true,
      mbadatanews: "",
      mbadata: "",
      banner1_url: "",
      banner2_url: "",
      banner3_url: "",
      kaoyanname: "",
      kaoyanphone: "",
      freename: "",
      freephone: "",
      hvc: false,
      hotmsg: true,
      // 轮播图配置信息, 更多请参考 swiper.js 中文网，上面很详细。
      swiperOption: {
        //effect : 'fade',
        speed: 1000,
        autoplay: true,
        loop: false,
        freeMode: false,
        observer: true,
        observeParents: true,
        observeSlideChildren: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          renderBullet: function(index, className) {
            return '<span class="' + className + '">' + (index + 1) + "</span>";
          }
        }
      },
      swiperOptionmin: {
        //effect : 'fade',
        speed: 1000,
        autoplay: true,
        loop: false,
        freeMode: false,
        observer: true,
        observeParents: true,
        observeSlideChildren: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          renderBullet: function(index, className) {
            return '<span class="' + className + '">' + (index + 1) + "</span>";
          }
        }
      }
    };
  },
  head() {
    return this.config.header;
  },
  mounted() {},
  created() {
   // console.log(this.experts);
    this.article_init();
    this.article_init2();
    this.$apiGet("banners", {
      cate_id: 11, // 分类id
      page: 1, // 分页 ，不传默认1
      limit: 1 // 数量，不传默认10
    }).then(res => {
      this.banner1_url = res.data[0];
    });
    this.$apiGet("banners", {
      cate_id: 12, // 分类id
      page: 1, // 分页 ，不传默认1
      limit: 1 // 数量，不传默认10
    }).then(res => {
      this.banner2_url = res.data[0];
    });
    this.$apiGet("banners", {
      cate_id: 13, // 分类id
      page: 1, // 分页 ，不传默认1
      limit: 1 // 数量，不传默认10
    }).then(res => {
      this.banner3_url = res.data[0];
    });

    // this.$apiGet("articlecategories").then(res => {
    // });
    // this.$apiGet("articlecategories", {pid: 19}).then(res => {
    //     console.log("文章类型2", res);
    // });
    // this.$apiGet("signtypes").then(res => {
    //     console.log("报名分类", res);
    // });
    //
    // //热点咨询
    // console.log("热点咨询", this.hotnews);
    // //热门课程
    // console.log("热门课程", this.hotclass);
  },
  methods: {
    article_init2() {
      // MPAcc | 会计硕士
      let allpromise2 = [
        this.$apiGet("articles", {
          cate_id: 11,
          page: 1,
          limit: 11,
          is_index: 1
        }),
        this.$apiGet("articles", {
          cate_id: 12,
          page: 1,
          limit: 11,
          is_index: 1
        }),
        this.$apiGet("articles", {
          cate_id: 14,
          page: 1,
          limit: 11,
          is_index: 1
        }),
        this.$apiGet("articles", {
          cate_id: 15,
          page: 1,
          limit: 11,
          is_index: 1
        }),
        this.$apiGet("articles", {
          cate_id: 17,
          page: 1,
          limit: 11,
          is_index: 1
        }),
        this.$apiGet("articles", {
          cate_id: 18,
          page: 1,
          limit: 11,
          is_index: 1
        }),
        this.$apiGet("articles", {
          cate_id: 20,
          page: 1,
          limit: 11,
          is_index: 1
        }),
        this.$apiGet("articles", {
          cate_id: 21,
          page: 1,
          limit: 11,
          is_index: 1
        })
      ];
      Promise.all(allpromise2).then(res => {
       // console.log('MBA', res)
        this.mbadatanews = res;
      });
    },
    article_init() {
      //MBA | 工商管理硕士
      let allpromise = [
        this.$apiGet("articles", {
          cate_id: 2,
          page: 1,
          limit: 4,
          is_index: 1
        }),
        this.$apiGet("articles", {
          cate_id: 3,
          page: 1,
          limit: 4,
          is_index: 1
        }),
        this.$apiGet("articles", {
          cate_id: 7,
          page: 1,
          limit: 5,
          is_index: 1
        }),
        this.$apiGet("articles", {
          cate_id: 8,
          page: 1,
          limit: 11,
          is_index: 1
        }),
        this.$apiGet("articles", {
          cate_id: 5,
          page: 1,
          limit: 4,
          is_index: 1
        }),
        this.$apiGet("articles", {
          cate_id: 6,
          page: 1,
          limit: 4,
          is_index: 1
        }),
        this.$apiGet("articles", {
          cate_id: 29,
          page: 1,
          limit: 5,
          is_index: 1
        }),
        this.$apiGet("articles", {
          cate_id: 9,
          page: 1,
          limit: 11,
          is_index: 1
        })
      ];
      Promise.all(allpromise).then(res => {
        //console.log('MBA', res)
        this.mbadata = res;
      });
    },
    freebtn(n, p) {
      if (!n) {
        this.$message.error("请输入姓名");
        return false;
      }
      if (!/^1[3456789]\d{9}$/.test(p)) {
        this.$message.error("请输入正确的手机号码");
        return false;
      }
      //console.log(n, p);
      this.$apiPost("addsignlog", {
        type_id: 2,
        name: n,
        phone: p
      }).then(res => {
        // console.log(res);
        if (res.code == 1) {
          this.$message.success("提交成功");
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    cha_list() {
      if (this.hvc == true) {
        this.hvc = false;
      }
    },
    vx_content() {
      if (this.hvc == false) {
        this.hvc = true;
      }
    },
    donwplay() {
      this.myswiper2.autoplay.stop();
    },
    leavemouse() {
      this.myswiper2.autoplay.start();
    }
  }
};
</script>

<style>
.ul-pub {
    margin-top: 10px;
    height: 310px;
    overflow: hidden;
}
#pc_Banner {
  display: block;
}
#phone_Banner {
  display: none;
}
.bannerinner {
  height: 400px;
  width: 100vw;
  background-size: cover !important;
}

.picnm img {
  object-fit: cover !important;
}

.tuan_ul {
  width: auto;
  position: relative;
  overflow: hidden;
  padding: 0px;
  margin: 0px;
  left: -0;
  display: flex;
}

.liauyx_c {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
}

.description_d {
  overflow: auto;
  white-space: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  height: 100px;
}

.headss img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

.zhe_p {
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 100%;
  text-align: center;
  background: rgba(255, 255, 255, 0.829);
  font-size:18px;
  color:rgba(32, 32, 32, 0.829);
}

.siperdong img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.siperdong {
  position: relative;
  height: auto;
}

.secw7 .w-top {
  box-sizing: border-box;
  width: 100%;
}

.turoring {
  margin: auto;
  padding: 0px !important;
  height: auto;
}

.tabcen-hh {
  display: flex;
  justify-content: space-between;
}

.rmb_b span:last-child {
  font-size: 15px;
  color: #ff665a;
}

.rmb_b {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.obn {
  margin-top: 14px;
  font-size: 13px;
  color: #ff665a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pmn {
  font-size: 14px;
  margin-top: 20px;
  color: #333333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fvix img {
  width: 100%;
  height: 100px;
  object-fit: cover;
}

.fvix {
  width: 100%;
}

.vnmj:nth-child(3n + 3) {
  border-right: 0px;
}

.vnmj {
  width: 28%;
  padding: 0px 12px;
}

.box_simn img {
  width: 100%;
}

.box_simn {
  width: 1200px;
  margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 0px 17px 0px;
}

.er_wei {
  margin-top: 10px;
  cursor: pointer;
  color: #ff665a !important;
}

.sipers {
  position: relative;
}

.sipers p {
  position: absolute;
  bottom: 25px;
  left: 2.5%;
  width: 95%;
  background: rgba(255, 255, 255, 0.7);
  color: #000;
  text-align: center;
}

.shu_lun {
  width: 260px;
  height: 250px;
  background: #f7f7f7;
  overflow: hidden;
  padding: 10px;
  box-sizing: border-box;
}

.nes_list {
  display: flex;
  flex-direction: column;
}

.nes_mk p {
  color: #000;
  font-size: 14px;
}

.nes_mk img {
  margin-right: 10px;
}

.nes_mk {
  display: flex;
  align-items: center;
}

.fen_ssk {
  font-size: 14px;
  color: #888;
  padding-top: 8px;
  box-sizing: border-box;
}

.shunl_v {
  height: 100% !important;
}

.zhe_nb {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  overflow: scroll;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.time_bn {
  position: relative;
  width: 200px;
}

.time_bn img {
  width: 100%;
}

.cha_s {
  position: absolute;
  width: 25px !important;
  right: 5px;
  top: 3px;
}

@media (max-width: 1300px) {
  .tabcen-hh {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .secbox {
    width: 90%;
  }

  .secw1 .w-cbox {
    width: 25%;
  }

  .secw1 .w-zbox {
    width: 40%;
  }
  .secbox {
    display: flex;
    justify-content: space-between;
  }
  .secw1 .hotrec li {
    width: calc((100% - 12px) / 2);
  }

  .secw1 .hotrec li p {
    font-size: 20px;
  }

  .w-yuyue .w-text {
    width: 100%;
    box-sizing: border-box;
  }

  .w-dlist a {
    display: flex;
    flex-direction: column;
  }

  .w-dlist-l {
    width: 80%;
    margin: auto;
    height: auto;
    padding: 5px;
    box-sizing: border-box;
  }

  .w-dlist-r {
    display: flex;
    flex-direction: column;
  }

  .w-dlist-r p {
    width: 80%;
    margin: auto;
    margin-top: 5px;
    margin-bottom: 5px;
  }

  .w-dlist-r em {
    width: 80%;
    position: inherit;
    margin: auto;
  }

  .w-dlist li {
    margin-bottom: 15px;
  }

  .secw1 .w-cbox {
    height: auto;
    padding-bottom: 10px;
  }

  .secw2 {
    display: inherit;
    margin: auto;
    width: 90%;
  }

  .secw2 .w-top {
    width: 100%;
    box-sizing: border-box;
  }

  .secw2 .box1 {
    width: 25%;
  }

  .secw2 .box1 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .secw2 .box2 {
    width: 30%;
  }

  .secw2 .box2 .dashed {
    display: flex;
    justify-content: space-between;
  }

  .secw2 .box2 .centbd .left {
    width: 30%;
    box-sizing: border-box;
    padding-right: 0px;
    text-align: center;
  }

  .secw2 .box2 .centbd .right {
    width: 60%;
  }

  .secw2 .box2 .centbd .left img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .secw2 .box2 .centbd .right h1 {
    width: 100%;
  }

  .secw2 .fl {
    float: none;
  }

  .secw2 .fr {
    float: none;
  }

  .secw2 .box2 .centbd {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  .secw2 {
    height: auto;
  }

  .secw2 .box1 {
    height: auto;
  }

  .secw2 .box2 {
    width: 20%;
  }

  .zheng_lix {
    display: flex;
    padding: 0px 10px;
    justify-content: space-between;
  }

  .secw2 .box3 {
    width: 20%;
  }

  .secw2 .box3 {
    width: 20%;
  }

  .secw2 .box4 {
    width: 20%;
  }

  .secw2 .box3 h1 {
    width: 100%;
  }

  .secw2 .box4 h1 {
    width: 100%;
  }

  .ul-pub li p {
    width: auto;
  }

  .ul-pub li {
    display: flex;
  }

  .w-adve img {
    width: 100%;
  }

  .box_simn {
    width: 90%;
    margin: auto;
  }

  .secw3 .boxbd {
    width: 20%;
  }

  .secw3 .w-bot {
    width: 100%;
  }

  .secw3 .tabul {
    width: 100%;
  }

  .secw3 .tabul li {
    width: calc(50% - 2px);
  }

  .secw3 .boxbd {
    width: 20%;
    border: 1px solid #eee;
    padding: 10px;
    box-sizing: border-box;
  }

  .secbox {
    display: inherit;
  }

  .secw3 .boxbd {
    width: 48%;
    border: 1px solid #eee;
    padding: 10px;
    box-sizing: border-box;
    display: inline-block;
  }

  .secw3 {
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .tabCon {
    min-height: 200px;
  }

  .tabcen-on {
    height: 100%;
  }

  .secw4 .rbox {
    width: calc(100% - 305px);
  }

  .secw4 .rbox .album {
    width: 100%;
    margin: 0px 0px 0px 0px;
    display: inline-block;
  }

  .secw4 .album .al-box1 {
    width: 25%;
  }

  .secw4 .album .al-box2 {
    width: 25%;
  }

  .secw4 .al-box1 img {
    width: 100%;
  }

  .secw4 .al-box2 .last1 {
    width: 100%;
  }

  .secw4 .al-box2 .last1 .icon1 {
    width: 50%;
  }

  .secw4 .al-box2 .last1 .icon1 img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: contain;
  }

  .secw4 .al-box2 .last1 {
    display: flex;
  }

  .secw4 .al-box2 .text {
    width: 100%;
  }

  .secw4 .al-box2 .last2 {
    width: 100%;
  }

  .secw4 .al-box2 .last2 img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
  }

  .secw4 .al-box3 {
    width: 20%;
  }

  .secw4 .al-box3 .last3 {
    width: 100%;
  }

  .secw4 .al-box3 .last3 img {
    width: 100%;
    height: 100%;
  }

  .secw4 .al-box3 .last4 {
    width: 100%;
  }

  .secw4 .al-box3 .last4 img {
    width: 100%;
  }

  .secw4 .al-box4 {
    width: 25%;
  }

  .secw4 .al-box4 .last5 {
    width: 100%;
  }

  .al-box4 .more {
    width: 100%;
    padding: 26px 27px;
    line-height: 30px;
    text-align: center;
    box-sizing: border-box;
    font-size: 30px;
    color: #fff;
    font-weight: bold;
    background-color: #d72525;
    display: inline-block;
  }

  .secw4 .al-box4 .last5 img {
    width: 100%;
  }

  .secw5 .w-top {
    width: 100%;
    box-sizing: border-box;
  }

  .secw5 .box {
    width: 30%;
  }

  .secw5 .box {
    height: auto;
  }

  .zeng_ii {
    display: flex;
  }

  .secw5 {
    height: auto;
    padding-bottom: 20px;
  }

  .secw5 .box .centbd {
    margin: 10px;
  }

  .secw5 .box .centbd .head {
    width: 50%;
    height: auto;
    display: flex;
    position: absolute;
    right: 0px;
    top: 8px;
    justify-content: flex-end;
  }

  .secw5 .box .centbd h1 {
    font-size: 14px;
    color: #000;
    display: inline-block;
    width: 50%;
    margin-bottom: 10px;
  }

  .secw5 .box .centbd .last span {
    width: 40%;
  }

  .secw5 .box .centbd .last {
    display: flex;
    justify-content: space-between;
  }

  .secw5 .box .centbd .last a {
    font-size: 12px;
    color: #000;
    padding: 2px;
    border: 1px solid #000;
    float: right;
    box-sizing: border-box;
    width: 50%;
    text-align: center;
    line-height: 30px;
  }

  .scrollx {
    width: 100%;
    margin-bottom:40px!important;
  }

  .secw6 .w-top {
    width: 90%;
  }

  .secw4 .al-box4 {
    width: 24%;
  }

  .al-box4 .more {
    font-size: 18px;
  }

  .al-box2 .text {
    font-size: 18px;
  }

  .w-dlist-r span {
    color: #969688;
    display: inline-block;
    width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 80%;
    margin: auto;
  }
}

@media (max-width: 1200px) {
  .down_time span {
    display: inline-block;
    font-size: 14px;
    width: auto;
    height: auto;
    padding: 5px;
    line-height: initial;
    text-align: center;
    color: #fff;
    border-radius: 5px;
    background: #333;
  }

  .down_time h3 {
    font-size: 14px;
    margin-right: 5px;
  }

  .down_time strong {
    font-size: 15px;
    color: #333;
    margin: 0 3px;
  }

  .telbox p span {
    color: #000000;
    font-size: 16px;
    font-weight: 700;
    font-weight: bold;
    vertical-align: middle;
  }

  #tongyi {
    font-size: 13px !important;
    justify-content: center;
  }

  .logo_box h1 {
    width: 250px;
  }

  .logo_box h1 img {
    width: 49%;
    height: auto;
  }
}

@media (max-width: 800px) {
  #phone_Banner {
    display: block;
  }
  #pc_Banner {
    display: none;
  }
  .bannerinner {
    height: 56.1vw;
    background-size: contain !important;
  }

  .secw1 .tabCon ul li p {
    width: 90%;
  }
  .w-dlist-r em {
    width: 100px;
    position: inherit;
    margin: auto;
    text-align: center;
  }
  .w-dlist-l {
    width: 80%;
    margin: auto;
    height: auto;
    padding: 5px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-around;
  }
  .secw1 .w-cbox {
    width: 100%;
    margin-bottom: 30px;
  }
  .secbox {
    flex-direction: column;
  }

  .secw1 .w-cbox {
    width: 100%;
  }

  .secw1 .w-zbox {
    width: 100%;
    margin-top: 10px;
  }

  .secw1 .hotrec {
    margin-top: 5px;
    display: inline-block;
    width: 100%;
  }

  .secw1 .w-zbox {
    margin: 0px;
  }

  .secw2 .box1 {
    width: 100%;
    margin: 0;
  }

  .secw2 .box2 {
    width: 100%;
    margin: 0px;
  }

  .zheng_lix {
    flex-direction: column;
  }

  .secw2 .box3 {
    width: 100%;
    margin: 0px;
  }

  .secw2 .box4 {
    width: 100%;
  }

  .secw4 {
    height: auto;
    flex-direction: column;
  }

  .tithd {
    font-size: 13px;
  }

  .secw3 .boxbd {
    width: 80%;
    border: 1px solid #eee;
    padding: 10px;
    box-sizing: border-box;
    display: block;
  }

  .secw4 .rbox {
    width: 100%;
  }

  .secw4 .lbox {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .secw4 .al-box4 {
    width: 22%;
  }

  .al-box4 .more {
    padding: 26px 0px;
  }

  .zeng_ii {
    display: -webkit-box;
    display: flex;
    flex-direction: column;
  }

  .secw5 .box {
    width: 90%;
    margin: auto;
    margin-bottom: 15px;
  }

  .secw5 .box .centbd .last a {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .scrollx {
    margin: 0px;
  }

  .turoring {
    box-sizing: border-box;
    display: none;
  }

  .secw2 .upscroll li {
    margin-top: 8px;
    display: flex;
    justify-content: center;
  }
  .w-dlist a {
    flex-direction: inherit;
  }
  .w-dlist-r em {
    position: inherit;
  }
  .w-dlist-l {
    width: 20%;
    margin: auto;
    height: auto;
    padding: 5px;
    box-sizing: border-box;
    display: -webkit-box;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
  .w-dlist-r {
    width: 70%;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    flex-direction: inherit;
    text-decoration: inherit;
  }
  .w-dlist-r span {
    display: none;
  }
  .w-dlist-r em {
    padding: 0px;
    right: 0px;
    top: 0px;
    border-radius: 3px;
  }
  .secw1 .tabCon {
    padding: 0px 0px;
  }
  #tab2 .fr {
    width: 90%;
    text-align: right;
  }
  .w-adve {
    height: auto;
  }
  .secw3 .boxbd {
    width: 100%;
  }
  .turoring {
    display: block;
  }
  .tuan_ul .clone:last-child {
    display: none;
  }
  .secw6 .slideBox ul li {
    width: 30% !important;
    margin: 0 auto 20px !important;
  }
  .huazhang_slide > .swiper-wrapper .swiper-slide {
    width: calc((100% - 0px) / 1) !important;
  }
  .rightphone {
    display: flex;
    position: fixed;
    right: 0;
    width: 100%;
    top: inherit;
    bottom: 0px !important;
    display: flex;
    flex-direction: inherit;
  }
  .rpitem {
    width: calc(100%) !important;
  }
  .footer {
    padding-bottom: 86px;
  }
  .secw7 .w-top {
    padding: 5px 5px 20px 5px;
    display: flex;
    align-items: center;
  }
  .morehd {
    margin-top: 0px;
  }
  .tithd {
    width: 80%;
  }
  .w-dlist-r p {
    margin-right: 15px;
  }
  .w-dlist-r em {
    padding: 0px;
    right: 0px;
    top: 0px;
    height: auto;
    border-radius: 3px;
    line-height: 24px;
  }
  .w-yuyue .w-text {
    height: auto;
    line-height: 30px;
    border: 1px solid #000;
  }
}

/*2020 0526 修改*/
.w-dlist li{
  height: 60px;
  overflow: hidden;
}
</style>
